<template>
  <view class="back-container" v-if="showBackApp">
		<view class="back-btn-click" @click="backAIqiyi" data-content="返回爱奇艺" id="backIqiyi" data-name="返回爱奇艺" data-type="button">
			<button class="back-btn-click" open-type="launchApp" app-parameter="wechat" @launchapp="launchappSuccess" @error="launchAppError">
			</button>
		</view>
    
    <image class="small-icon back-icon" src="https://100000063-1252208446.file.myqcloud.com/images/ICON/arrow-left.png" mode="widthFix"></image>
    <view class="back-text">返回爱奇艺</view>

    <view class="close-icon-box">
      <image class="close-icon small-icon" @click.stop="closeBackApp" src="https://100000063-1252208446.file.myqcloud.com/images/ICON/close.png" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
  import {
    SYSTEM_INFO
  } from '@/utils/constant';
  export default {
    data() {
      return {
        showBackApp: false,
      };
    },

    computed: {
      getLogo() {
        return this.$store.state.storeLogo;
      },
    },

    mounted() {
			this.showBackApp = getApp().globalData.isFromApp;
    },

    methods: {
      backAIqiyi() {
				//	此方法主要是为了触发神策的全埋点事件「$MPClick」来实现 返回爱奇艺按钮的点击埋点
      },
      launchAppError (e) {
		
      },
      launchappSuccess (e) {
        
      },
      closeBackApp() {
        this.showBackApp = false;
				getApp().globalData.isFromApp = false;
      },
    }
  };
</script>

<style>
  .back-container {
    position: fixed;
    width: 234rpx;
    height: 72rpx;
    left: 0;
    top: 220rpx;
    background-color: red;
    z-index: 9999;
    border-radius: 0px 4px 4px 0px;
    /* background-color: red; */
    background: rgba(77, 77, 77, 0.6);
    display: flex;
    align-items: center;
    padding: 0 20rpx 0 12rpx;
  }
  .back-btn {
    width: 214rpx;
    padding: 0;
  }
  .back-btn-click {
    width: 174rpx;
    height: 72rpx;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }
  .back-image {
    width: 234rpx;
  }
  .close-icon-box {
    position: absolute;
    width: 60rpx;
    height: 72rpx;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .close-icon {
    position: absolute;
    top: 26rpx;
    right: 20rpx;
    width: 20rpx;
    height: 20rpx;
    /* background-color: aqua; */
  }
  .small-icon {
    height: 20rpx;
  }
  .back-icon {
    width: 10rpx;
    margin-right: 20rpx;
/*    position: absolute;
    left: 12rpx;
    top: 26rpx; */
  }
  .back-text {
    font-size: 26rpx;
    font-weight: normal;
    line-height: 26rpx;
    letter-spacing: 0em;
    color: #FFFFFF;
    height: 72rpx;
    line-height: 72rpx;
		font-family: NotoSansSC-Regular;
  }
</style>
